import React, { Component } from "react";
import dayjs from "dayjs";
import "./index.scss";
export default class Mounth extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentDay: -1
    };
    this.mounth_obj = this.setMounthsArray(this.props.whichmounth); //初始化数组
  }

  disabledDate(current){
    if(this.props.disabledDate){
      return   this.props.disabledDate(current);
    }else{
      return '无';
    }
  }

  getdays(mounth = "2018-05") {
    //获得这个月的天数
    return dayjs(mounth).daysInMonth();
  }
  getfirstdayWeek(mounth = "2018-05") {
    //获得当月的第一天是星期几
    const m = `${mounth}-01`;
    return dayjs(m).format("d"); //0,1,2,3,4.....6;
  }
  getlastdayWeek(mounth = "2018-05") {
    //当月最后一天是星期几
    const m = `${mounth}-${this.getdays(mounth)}`;
    return dayjs(m).format("d");
  }
  getmounthArrayNum(mounth = "2018-05") {
    //计算获得数组的长度
    const f_w = parseInt(this.getfirstdayWeek(mounth), 10);
    const d = parseInt(this.getdays(mounth), 10);
    const l_w = parseInt(this.getlastdayWeek(mounth), 10);
    console.log("f_w", f_w);
    console.log("f_w", d);
    console.log("f_w", l_w);
    return f_w + d + (6 - l_w);
  }
  setMounthsArray(mounth = "2018-05") {
    //初始化天数数组
    const a_n = this.getmounthArrayNum(mounth);
    const d = parseInt(this.getdays(mounth), 10);
    const f_w = parseInt(this.getfirstdayWeek(mounth), 10);
    const m_arr = Array(a_n)
      .fill({})
      .map((item, index) => {
        if (index >= f_w && index < f_w + d) {
          return { day: index - f_w + 1 };
        } else {
          return { day: -1 };
        }
      });
    return m_arr;
  }
  handleclick(d,isdisable) {
    if (!d||isdisable) {
      return;
    }
    const chooseDate = dayjs(this.props.whichmounth + d).format("YYYY-MM-DD");
    this.setState({
      currentDay: chooseDate
    });
    this.props.getDate(chooseDate);
  }

  render() {
    return (
      <div className="mounth">
        <p className="title">{dayjs(this.props.whichmounth).format("YYYY年MM月")}</p>
        <ul className="mounth">
          {this.mounth_obj.map((item, index) => {
            let iscurrent = false;
            let isbetween = false;
            let isdisable=true; //是否可以点击
            if (item.day !== -1) {
              iscurrent =
                this.props.current ===
                dayjs(this.props.whichmounth + item.day).format("YYYY-MM-DD")
                  ? true
                  : false;
              iscurrent =
                iscurrent ||
                (this.props.end ===
                dayjs(this.props.whichmounth + item.day).format("YYYY-MM-DD")
                  ? true
                  : false);

              if (this.props.end) {
                isbetween= dayjs(this.props.whichmounth + item.day).isAfter(dayjs(this.props.current))&&dayjs(this.props.whichmounth + item.day).isBefore(dayjs(this.props.end))
              }
              isdisable=this.disabledDate(dayjs(this.props.whichmounth + item.day));
            }

            return (
              <Day
              isdisable={isdisable}
                isbetween={isbetween}
                iscurrent={iscurrent}
                key={index}
                day={item.day !== -1 ? item.day : ""}
                onClick={() => {
                  this.handleclick(item.day,isdisable);
                }}
              />
            );
            // if (
            //   this.props.current ==
            //   dayjs(this.props.whichmounth + item.day).format("YYYY-MM-DD")
            // ) {
            //   return (
            //     <li
            //       className="day-item current"
            //       key={index}
            //       onClick={() => {
            //         this.handleclick(item.day);
            //       }}
            //     >
            //       <p>{item.day}</p>
            //     </li>
            //   );
            // } else {
            //   return (
            //     <li
            //       className="day-item"
            //       key={index}
            //       onClick={() => {
            //         this.handleclick(item.day);
            //       }}
            //     >
            //       <p>{item.day}</p>
            //     </li>
            //   );
            // }
          })}
        </ul>
      </div>
    );
  }
}
function Day(props) {
    return (
      <li
        className={`day-item ${props.iscurrent?'current':''} ${props.isbetween?'between':''}${props.isdisable?'disable':''}`}
        onClick={() => {
          props.onClick();
        }}
      >
        <p className="day">{props.day}</p>
        {/* <p class="tip">$99</p> */}
      </li>
    );
}
